<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="/css/nav-top.css">
    <link rel="stylesheet" href="/css/mainPage.css">
    <link rel="stylesheet" href="/css/nav-middle.css">
    <script src="/js/index.js"></script>
    <style>
        nav {
            float: left;
            width: 50%;
            height: 500px; /* only for demonstration, should be removed */
            padding: 20px;
        }

        /* Style the list inside the menu */
        nav ul {
            list-style-type: none;
            padding: 0;
        }

        article {
            float: left;
            width: 450px;
            height: 550px; /* only for demonstration, should be removed */
            border-style: hidden;
        }

        /*响应式布局 - 使两列/框在小屏幕上堆叠在一起，而不是彼此相邻*/
        @media (max-width: 600px) {
            nav, article {
                width: auto;
                height: auto;
            }
        }
    </style>
</head>
<body class="bg">
    <div class="nav-top">
        <div class="w">
            <div class="nav_logo">
                <span>JPetStore</span>
            </div>
            <ul class="nav_link">
                <li class="nav-top-item">
                    <a href="01.html" class="link"><span style="color:#215496;font-weight:bold">首页</span></a>
                </li>
                <li class="nav-top-item">
                    <a href="02.html" class="link">商品</a>
                </li>
                <li class="nav-top-item">
                    <a href="#" class="link">订单</a>
                </li>
                <li class="nav-top-item">
                    <a href="#" class="link">设置</a>
                </li>
            </ul>
        </div>
    </div>
    <section>
        <nav class="nav-middle">
            <h1 class="welcome"><span style="color:#215496;font-weight:bold">W</span>elcome</h1>
            <br>
            <h1 class="to"><span style="color:#215496;font-weight:bold">T</span>o</h1>
            <br>
            <h4 class="jPetstore"><span style="color:#215496;font-weight:bold">J</span>PetStore</h4>
        </nav>

        <article class="container">
            <a href="#" class = 'left arrowhead'>&lt;</a>
            <a href="#" class = 'right arrowhead'>&gt;</a>
            <ul class = 'pic'>
                <li>
                    <div><img src="/img/01.jpg" alt=""></div>
                </li>
                <li>
                    <div><img src="/img/05.jpg" alt=""></div>
                </li>
                <li>
                    <div><img src="/img/03.jpg" alt=""></div>
                </li>
                <li>
                    <div><img src="/img/04.jpg" alt=""></div>
                </li>
                <li>
                    <div><img src="/img/02.jpg" alt=""></div>
                </li>
            </ul>
            <ul class="lis">
            </ul>
        </article>
    </section>
</body>
</html>